<template>
  <div class="rich_content indexBG">
    <div class="queueItem" :class="item.open?'active':''" @tap="titleClick(index)" v-if="list" v-for="(item,index) in list" :key="index">
      <div class="title">
        {{item.title}}
        <img src="" class="icon">
      </div>
      <div class="answer" :id="item.pid" v-if="item.open != null" :style="{'height':item.height}">
        <div>{{item.aw}}</div>
      </div>
    </div>
  </div>
</template>

<script>

import {API} from "../../api";
import {hideLoading, showLoading} from "../../api/wechat";
import {showToast} from "../../utils";

export default {
  data () {
    return {
      defaultOp:-1,
      title:'',
      list:[]
    }
  },
  components: {

  },
  mounted() {
    let _this = this;
    _this.getQuestions();
  },
  methods: {

    titleClick: function(index) {
      var obj = this.list[index];
      obj.open = !obj.open;
      if(obj.open) {
        obj.height = "auto";
      } else {
        obj.height = "0px";
      }
      this.list[index] = obj;
    },
    getQuestions(){
      let _this = this;
      showLoading({title:"加载中"});
      API.getQuestions({}).then( res => {
        hideLoading();
        if(res.code == 200){
          let arr = [];
          let dat = res.data;
          console.log(dat);
          for(var i = 0 ; i < dat.length ; i++){
              var obj = dat[i];
              obj['open'] = null;
              obj['height'] = "0px";
              obj['pid'] = "itemPId" + i;
              arr.push(obj);
          }
          console.log(arr);
          _this.list = arr;
        }
      });
    },

  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .indexBG{
  }
   .title {
     line-height: 0.9rem;
     font-size: 0.32rem;
     color: #1b1b1b;
     padding: 0 0.24rem;
     position: relative;
     border-bottom: 1px solid #efefef;
   }

  .title .icon {
    position: absolute;
    right: 0.24rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.22rem;
    height: 0.22rem;
    display: block;
    transition: 0.5s;
  }

  .queueItem.active .title .icon {
    -webkit-transform: translateY(-50%) rotateZ(-180deg);
    transform: translateY(-50%) rotateZ(-180deg);
  }

  .answer {
    height: 0;
    transition: height 0.5s;
    box-sizing: border-box;
    overflow: hidden;
  }

  .answer>div {
    padding: 0.4rem 0.24rem;
    font-size: 0.3rem;
    color: #9a9a9a;
    line-height: 0.42rem;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
  }





</style>
